<template>
    <div>
        <div class="container">
            <div class="neirong-top">

                <router-link to="/home" tag="div">
                    <svg t="1665473630891" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="842" width="16" height="16">
                        <path
                            d="M517.688889 796.444444c-45.511111 0-85.333333-17.066667-119.466667-51.2L73.955556 381.155556c-22.755556-22.755556-17.066667-56.888889 5.688888-79.644445 22.755556-22.755556 56.888889-17.066667 79.644445 5.688889l329.955555 364.088889c5.688889 5.688889 17.066667 11.377778 28.444445 11.377778s22.755556-5.688889 34.133333-17.066667l312.888889-364.088889c22.755556-22.755556 56.888889-28.444444 79.644445-5.688889 22.755556 22.755556 28.444444 56.888889 5.688888 79.644445L637.155556 739.555556c-28.444444 39.822222-68.266667 56.888889-119.466667 56.888888 5.688889 0 0 0 0 0z"
                            p-id="843"></path>
                    </svg>
                </router-link>

                <span style="font-size: 14px;font-weight: 800;">我的内容</span>
                <svg t="1665473683370" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="1017" width="18" height="18">
                    <path
                        d="M600.631 757.016a30.104 30.104 0 0 0-7.432 0.944l-174.761 45.062c-13.278 3.082-21.909 15.912-19.759 29.372 1.592 12.563 11.383 25.362 26.895 25.362a29.984 29.984 0 0 0 7.491-1.003l174.702-45.003c13.278-3.082 21.909-15.912 19.759-29.373-1.593-12.621-11.324-25.361-26.895-25.361z m-41.759 94.252a25.835 25.835 0 0 0-14.804 5.013c-11.619 7.962-22.767 12.386-33.088 12.976h-1.357a45.727 45.727 0 0 1-20.054-5.898c-0.59-0.295-2.89-1.828-4.424-2.831-4.247-2.831-5.426-3.598-6.842-3.775a28.2 28.2 0 0 0-12.976-3.185 31.26 31.26 0 0 0-28.901 20.172c-3.362 9.732-0.177 19.582 8.493 26.482 19.582 15.394 42.466 23.592 66.059 23.592 21.587 0 42.997-6.901 61.871-19.936a27.956 27.956 0 0 0 10.97-32.263c-3.775-12.15-13.802-20.289-24.949-20.289v-0.058z m149.517-491.902A207.792 207.792 0 0 0 625.58 275.2a228.133 228.133 0 0 0-110.294-27.839c-33.383 0-66.943 7.078-97.142 20.466a222.66 222.66 0 0 0-81.394 61.222c-41.169 49.367-58.568 120.852-46.418 191.098 11.619 67.533 48.6 124.214 101.447 155.533a27.315 27.315 0 0 0 14.037 4.011 28.31 28.31 0 0 0 26.541-21.705c3.523-11.792-1.66-24.445-12.445-30.375-70.659-41.877-90.772-142.734-68.831-212.214 21.292-67.356 86.466-112.654 162.198-112.654 31.909 0 62.992 8.257 89.828 23.887 36.332 21.115 62.284 56.327 73.136 99.147a177.358 177.358 0 0 1-19.464 135.008c-9.614 15.748-22.059 30.316-34.091 44.354-7.727 8.965-15.748 18.284-23.003 27.898-12.386 16.515-16.161 34.209-19.877 51.255l-2.005 9.142-159.367 42.407c-13.333 3.19-21.933 16.142-19.7 29.667 1.651 12.445 11.324 25.126 26.718 25.126a29.837 29.837 0 0 0 7.668-1.062l124.332-33.088c4.6-1.239 9.142-2.359 13.448-3.421 34.032-8.375 60.868-15.04 63.994-64.171 1.121-17.34 15.984-33.619 29.137-47.834 3.362-3.716 6.547-7.137 9.437-10.617 15.807-18.461 35.448-43.587 47.893-73.254 26.306-62.638 21.646-132.884-12.976-197.763l0.002-0.058zM237.72 478.095c0-15.335-12.386-27.839-27.721-27.839h-54.027c-15.359 0-27.81 12.451-27.81 27.81 0 15.359 12.451 27.81 27.81 27.81h53.909c15.335 0 27.721-12.445 27.721-27.78h0.118z m628.974-27.839h-53.85c-15.359 0-27.81 12.451-27.81 27.81 0 15.359 12.451 27.81 27.81 27.81h53.85c15.359 0 27.81-12.451 27.81-27.81-0.001-15.359-12.451-27.81-27.81-27.81zM279.597 284.342c11.578 10.117 29.165 8.932 39.281-2.646 9.167-10.491 9.167-26.144 0-36.636l-38.102-38.22c-11.578-10.117-29.165-8.932-39.281 2.646-9.167 10.491-9.167 26.144 0 36.636l38.102 38.22z m465.596 387.506c-11.578-10.117-29.165-8.932-39.281 2.646-9.167 10.491-9.167 26.144 0 36.636l38.102 38.161c11.578 10.117 29.165 8.932 39.281-2.646 9.167-10.491 9.167-26.144 0-36.636l-38.102-38.161zM512.395 208.434c15.335 0 27.721-12.445 27.721-27.78v-53.968c-0.707-15.326-13.704-27.178-29.03-26.471-14.337 0.661-25.81 12.134-26.471 26.471v53.968c0 15.335 12.386 27.78 27.721 27.78h0.059zM318.878 671.848c-10.804-10.847-28.356-10.882-39.203-0.078l-0.078 0.078-38.102 38.161c-10.847 10.847-10.847 28.434 0 39.281 10.847 10.847 28.434 10.847 39.281 0l38.102-38.102c10.852-10.868 10.852-28.472 0-39.34z m387.034-387.506c10.804 10.847 28.356 10.882 39.203 0.078l0.078-0.078 38.102-38.161c10.847-10.847 10.847-28.434 0-39.281-10.847-10.847-28.434-10.847-39.281 0l-38.102 38.102c-10.852 10.869-10.852 28.472 0 39.34z"
                        p-id="1018"></path>
                </svg>
            </div>
            <div class="suist">
                <div class="suist-left">
                    <img src="../assets/img/sst.png" alt="" style="width: 72px;height: 41px;">
                    <img src="../assets/img/sst2.png" alt="" style="border-radius: 50%;width: 45px;margin-top: 10px;">
                </div>
                <div class="suist-right">
                    <div class="suist-main">
                        <span>近日回顾</span>
                        <i>0词</i>
                        <div>
                            <img src="../assets/img/24gf-play.png" alt="" style="width: 10px;">
                        </div>
                    </div>
                    <div class="suist-main">
                        <span>预习</span>
                        <i>0词</i>
                        <div>
                            <img src="../assets/img/24gf-play.png" alt="" style="width: 10px;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="neirong-main">
                <div class="nei-text">
                    <div class="nei-left">
                        <span>
                            <i>
                                <img src="../assets/img/日程.png" alt="" style="width: 16px;height: 16px;">
                            </i>
                            <p>近日已学</p>
                        </span>
                    </div>
                    <div class="nei-right">
                        <span style="color: #757575;font-size: 10px;">最近没有学习</span>
                        <svg t="1665480438918" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="9216" width="14" height="14">
                            <path
                                d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z"
                                p-id="9217" fill="#757575"></path>
                        </svg>
                    </div>
                </div>
            </div>

            <div class="neirong-main">
                <router-link to="/stadydone">
                    <div class="nei-text">
                        <div class="nei-left">
                            <span>
                                <i style="background: #fef4f5;">
                                    <img src="../assets/img/con-icon2.png" alt="" style="width: 16px;height: 16px;">

                                </i>
                                <p>已学习</p>
                            </span>
                        </div>
                        <div class="nei-right">
                            <span style="color: #757575;font-size: 10px;">{{ stadynumber }} 词</span>
                            <svg t="1665480438918" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="9216" width="14" height="14">
                                <path
                                    d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z"
                                    p-id="9217" fill="#757575"></path>
                            </svg>
                        </div>
                    </div>
                </router-link>

                <router-link to="/waitstady">
                    <div class="nei-text">
                        <div class="nei-left">
                            <span>
                                <i style="background: #f8f3fd;">
                                    <img src="../assets/img/con-icon3.png" alt="" style="width: 16px;height: 16px;">

                                </i>
                                <p>待学习</p>
                            </span>
                        </div>
                        <div class="nei-right">
                            <span style="color: #757575;font-size: 10px;">{{ unstadynum }} 词 </span>
                            <svg t="1665480438918" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="9216" width="14" height="14">
                                <path
                                    d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z"
                                    p-id="9217" fill="#757575"></path>
                            </svg>
                        </div>
                    </div>
                </router-link>


            </div>

            <div class="neirong-main">
                <router-link to="/vocabulary">
                    <div class="nei-text">
                        <div class="nei-left">
                            <span>
                                <i style="background: #f4f7ff;">
                                    <img src="../assets/img/con-icon4.png" alt="" style="width: 16px;height: 16px;">

                                </i>
                                <p>生词本</p>
                            </span>
                        </div>
                        <div class="nei-right">
                            <span style="color: #757575;font-size: 10px;">{{vocabularynum}} 词 </span>
                            <svg t="1665480438918" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="9216" width="14" height="14">
                                <path
                                    d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z"
                                    p-id="9217" fill="#757575"></path>
                            </svg>
                        </div>
                    </div>
                </router-link>


                <div class="nei-text">
                    <div class="nei-left">
                        <span>
                            <i style="background: #f4f7ff;">
                                <img src="../assets/img/con-icon5.png" alt="" style="width: 16px;height: 16px;">

                            </i>
                            <p>句库</p>
                        </span>
                    </div>
                    <div class="nei-right">
                        <span style="color: #757575;font-size: 10px;">最近没有学习</span>
                        <svg t="1665480438918" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="9216" width="14" height="14">
                            <path
                                d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z"
                                p-id="9217" fill="#757575"></path>
                        </svg>
                    </div>
                </div>

                <div class="nei-text">
                    <div class="nei-left">
                        <span>
                            <i style="background: #f0fbf8;">
                                <img src="../assets/img/con-icon6.png" alt="" style="width: 16px;height: 16px;">

                            </i>
                            <p>笔记</p>
                        </span>
                    </div>
                    <div class="nei-right">
                        <span style="color: #757575;font-size: 10px;">最近没有学习</span>
                        <svg t="1665480438918" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="9216" width="14" height="14">
                            <path
                                d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z"
                                p-id="9217" fill="#757575"></path>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['cet4list'],
    computed: {
        stadynumber() {
            var newArrays = this.cet4list.filter(function (item) {
                return !item.ripe && item.stadydone == true;
            });
            return newArrays.length;
        },
        unstadynum() {
            var newArrays = this.cet4list.filter(function (item) {
                return !item.ripe && !item.stadydone == true;
            });
            return newArrays.length;
        },
        vocabularynum() {
            var newArrays = this.cet4list.filter(function (item) {
                return item.vocabularylist == true;
            });
            return newArrays.length;
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    min-height: 667px;
    margin: 0 auto;
    background-color: #f4f4f4;
    position: relative;

    .neirong-top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 35px;
        /* position: absolute; */
        /* top: 35px; */

        svg {
            padding: 0 18px;
        }

    }

    .suist {
        margin: 0 12px;
        height: 135px;
        margin-top: 30px;
        /* background-color: rgb(255, 240, 228, 0.7); */
        background-image: linear-gradient(90deg, #fff6ed, #fff0e5);
        border-radius: 10px;
        box-shadow: 0px 5px 15px 5px rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: space-around;
        align-items: center;

        .suist-left {
            width: 100px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .suist-right {
            height: 104px;
            width: 230px;
            display: flex;
            background-color: rgb(243, 225, 212, 0.4);
            border-radius: 10px;
            justify-content: space-evenly;
            align-items: center;

            .suist-main {
                width: 104px;
                height: 90px;
                background-color: rgb(255, 251, 246);
                border-radius: 10px;
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;

                span {
                    font-size: 14px;
                    margin-left: 5px;
                    font-weight: 800;
                    color: #333;
                }

                i {
                    font-size: 10px;
                    color: rgb(160, 158, 156);
                    margin-left: 5px;
                }

                div {
                    width: 19px;
                    height: 19px;
                    background-color: rgb(254, 221, 197);
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-left: 80px;
                }

            }

        }


    }

    .neirong-main {
        background-color: white;
        border-radius: 10px;
        margin: 0 12px;
        margin-top: 23px;

        .nei-text {
            display: flex;
            justify-content: space-between;
            padding: 14px 0;

            .nei-left {
                span {

                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-left: 15px;

                    i {
                        width: 30px;
                        height: 30px;
                        border-radius: 10px;
                        background-color: #fdf8ef;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                    p {
                        font-size: 14px;
                        font-weight: 600;
                        color: #333;
                        padding-left: 5px;
                    }
                }
            }

            .nei-right {
                display: flex;
                align-items: center;
                margin-right: 15px;

                span {
                    // margin-right: 5px;
                    // margin-top: 2px;
                    // font-weight: 600;
                    font-size: 10px;
                }
            }
        }
    }
}
</style>